<template>
	<view class="search-box">
		<view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>
		<u-navbar back-text="">
			<u-search class="slot-wrap" placeholder="请输入书名、作者、或者类型" v-model="keyWord" @search="handleToSearch" @custom="handleToSearch"
			 shape="square" :clearabled="true" @clear="handleClearSearch" :focus="true"></u-search>
		</u-navbar>
		<!-- 热门搜索 -->
		<view class="search-content" v-if="hotSearchList.length > 0">
			<view class="search-title">
				<text>热门搜索</text>
				<u-icon name="reload" @click="refreshHotSearchList"></u-icon>
			</view>
			<view class="search-tag">
				<u-tag v-for="(item, index) in hotSearchList[searchListIndex]" :text="item.name" :key="index" shape="circle"
				 :data-id="item.id" :bg-color="item.color ? item.color:'#92c8ff'" :border-color="item.color ? item.color:'#92c8ff'"
				 color="#fff" @click="handleToBookDetail(item.id)" />
			</view>
		</view>
		<u-gap height="20" bg-color="#efefef" v-if="historySearchList.length>0"></u-gap>
		<!-- 历史搜索 -->
		<view class="search-content" v-if="historySearchList.length>0">
			<view class="search-title">
				<text>历史记录</text>
				<u-icon name="trash" @click="handleClearHistory"></u-icon>
			</view>
			<view class="search-tag">
				<u-tag v-for="(item, index) in historySearchList" :text="item" :key="index" shape="circle" :data-id="item.id"
				 bg-color="#92c8ff" border-color="#92c8ff" color="#fff" @click="handleToList(item)" />
			</view>
		</view>
		<u-gap height="20" bg-color="#efefef" v-if="searchList.length>0"></u-gap>
		<view class="list-content">
			<detail-card class="item" v-for="item in searchList" :name="item.name" :writer="item.writer" :is_over="item.is_over"
			 :type="item.type" :intro="item.intro" :image="item.image" :bookId="item.book_id" :key="item.book_id" @click="handleToBookDetail(item.id)"></detail-card>
			<u-empty v-if="searchEmpty" text="没有找到您想要的结果,换个关键词试试吧!" mode="search"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getSearch
	} from "@/api/homepage";
	export default {
		data() {
			return {
				keyWord: '',
				hotSearchList: [],
				searchListIndex: 0,
				historySearchList: [],
				searchList: [],
				searchEmpty: false
			}
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getHotSearchList();
			this.getHistorySearchList();
		},
		methods: {
			// 开始搜索
			handleToSearch(keyword) {
				uni.showLoading({
					title:'搜索中'
				})
				getSearch({
					keyword
				}).then(res => {
					this.searchList = res.data.items;
					this.searchEmpty = res.data.total === 0 
					this.setHistorySearchList(keyword)
					uni.hideLoading()
				});
			},
			// 清除搜索词
			handleClearSearch() {
				this.keyWord = ''
			},
			// 获取热门搜索
			getHotSearchList() {
				getSearch().then(res => {
					if (res.data.length > 0) {
						let _hotSearchList = res.data;
						_hotSearchList.forEach(item => {
							item.color = `rgb(${this.$u.random(0, 255)},${this.$u.random(0, 255)},${this.$u.random(0, 255)})`
						});
						this.hotSearchList.push(_hotSearchList.slice(0, Math.floor(_hotSearchList.length / 3)),
							_hotSearchList.slice(Math.floor(_hotSearchList.length / 3), Math.floor(_hotSearchList.length / 3) * 2),
							_hotSearchList.slice(Math.floor(_hotSearchList.length / 3) * 2, _hotSearchList.length));
					}
				});
			},
			// 刷新热门搜索
			refreshHotSearchList() {
				if ((this.searchListIndex + 1) === this.hotSearchList.length) {
					this.searchListIndex = 0
				} else {
					this.searchListIndex += 1;
				}
			},
			// 获取历史搜索
			getHistorySearchList() {
				let historySearchList = uni.getStorageSync("historySearch");
				if (historySearchList) {
					let _historySearchList = JSON.parse(historySearchList);
					if (_historySearchList.length > 0) {
						this.historySearchList = _historySearchList;
					}
				}
			},
			// 设置历史搜索
			setHistorySearchList(keyword) {
				if (!keyword) return;
				let historySearchList = uni.getStorageSync("historySearch");
				if (historySearchList) {
					let _historySearchList = JSON.parse(historySearchList);
					if (_historySearchList.length > 0) {
						if (_historySearchList.indexOf(keyword) == -1) {
							_historySearchList.push(keyword);
							uni.setStorageSync("historySearch", JSON.stringify(_historySearchList));
						}
					} else {
						_historySearchList.push(keyword);
						uni.setStorageSync("historySearch", JSON.stringify(_historySearchList));
					}
				} else {
					let historySearchList = [];
					historySearchList.push(keyword);
					uni.setStorageSync("historySearch", JSON.stringify(historySearchList));
				}
				this.getHistorySearchList()
			},
			// 清除历史搜索
			handleClearHistory() {
				let historySearchList = uni.getStorageSync("historySearch");
				if (historySearchList) {
					let _historySearchList = JSON.parse(historySearchList);
					if (_historySearchList.length > 0) {
						this.historySearchList = [];
						uni.setStorageSync(
							"historySearch",
							JSON.stringify(this.historySearchList)
						);
					}
				}
			},
			// 跳转书籍详情
			handleToBookDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				});
			},
			// 搜索列表
			handleToList(keyword) {
				this.keyWord = keyword;
				this.handleToSearch(keyword)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #F5F8FC;
	}

	.search-content,
	.list-content {
		padding: 20rpx;
	}
	
	.item{
		margin-bottom: 40rpx;
		&:last-child{
			margin-bottom: 0;
		}
	}

	.search-title {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.u-tag {
		margin-bottom: 20rpx;
	}
</style>
